import { useEffect, useState } from 'react'
import { cleanObject } from 'utils'
import { useMount, useDebounce } from 'hooks'
import { List } from './list'
import { SearchPanel } from './search-panel'
import { useHttp } from 'utils/http'

/*     
    1、unknown 可以赋任何值
    2、任何值都不可以赋unknown
    3、不能在unknown读取方法
    */
export const ProjectListScreen = () => {
  const [users, setUsers] = useState([])

  const [param, setParam] = useState({
    name: '',
    personId: ''
  })
  const debounceParam = useDebounce(param, 2000)
  const [list, setList] = useState([])

  const client = useHttp()
  useEffect(() => {
    client('projects', { data: cleanObject(debounceParam)}).then(setList)
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [debounceParam])

  useMount(() => {
    client('users').then(setUsers)
  })
  return (
    <div>
      <SearchPanel users={users} param={param} setParam={setParam} />
      <List users={users} list={list} />
    </div>
  )
}
